let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
] 
/**
 * 需求1：渲染页面按钮
 * 分析：
 *  count ： 渲染是button按钮中间的文本数据
 *  price 和  unitPrice 自定义属性，将来点击按钮的时候，需要使用这两个值
 *  去更改下面p中的显示的数据
 */
let btnHtml = ""
data.forEach(function(v,i){
btnHtml +=`<span class="number ${i === 0 ? 'select' : ''}" price="${v.price}" unitPrice="${v.unitPrice}">${v.count}次</span>`
})
console.log(btnHtml);
let btns = document.querySelector(".banner .btns")
btns.innerHTML += btnHtml
let bbtns = document.querySelectorAll(".btns .number")
bbtns.forEach(function(v){
    v.addEventListener("click",function(){
        for(let x = 0; x < bbtns.length; x++){
            bbtns[x].classList.remove("select")
        }
        this.classList.add("select")
        let money =document.querySelector(".banner .use .money")
        let count =document.querySelector(".banner .use .count")
        money.innerText = this.getAttribute("price")
        count.innerText = this.getAttribute("unitPrice")
    })
})


let toplis = document.querySelectorAll(".mutual .tabul li");
let tabitems = document.querySelectorAll(".left-box .bbooxx-api");
console.log(toplis);
console.log(tabitems);
for (let i = 0; i < toplis.length; i++) {
  toplis[i].addEventListener("click", function () {
 
    for (let x = 0; x < toplis.length; x++) {
      toplis[x].classList.remove("active");
    }
    this.classList.add("active")
    for (let x = 0; x < tabitems.length; x++) {
      tabitems[x].classList.remove("appier");
    }
    tabitems[i].classList.add("appier");
  })
}